<script setup lang="ts">
import { ref } from 'vue'
const bol = ref(false)

/*
vue动画怎么实现的
 动画条件：进入/离开动画   v-if/v-show
  1:用transition组件包住动画元素
  2:在transition加入一个name属性  name='xxx'
  3:写css
     xxx-enter-from:进入动画起点class,进入时希望从什么状态变到正常状态
     xxx-enter-active:进入过程中一直存在的class,常用于加入css的transition
     xxx-leave-to:离开时，希望从正常状态变到什么状态的class
     xxx-leave-active:离开过程中一直存在的class,常用于加入css的transition
*/
/*
vue多元素动画
  动画条件：进入/离开动画   v-if/v-show
  1：用transition-group组件包住动画元素
  2:在transition加入一个name属性  name='xxx'
  3：每一个动画元素都要加一个key属性
  4:写css
     xxx-enter-from:进入动画起点class,进入时希望从什么状态变到正常状态
     xxx-enter-active:进入过程中一直存在的class,常用于加入css的transition
     xxx-leave-to:离开时，希望从正常状态变到什么状态的class
     xxx-leave-active:离开过程中一直存在的class,常用于加入css的transition
*/

const bol2 = ref(true)
const bol3 = ref(true)
</script>

<template>
  <!-- <button @click="bol = !bol">修改box大小</button>
  <hr />
  <div class="box" :class="{ 'box-active': bol }"></div>
  <hr />
  <button @click="bol2 = !bol2">切换显示</button>
  <transition name="fade">
    <div class="box2" v-if="bol2"></div>
  </transition> -->
  <hr />
  <button @click="bol3 = !bol3">切换显示222</button>
  <hr />
  <transition-group name="xxx">
    <div class="box33 b1" :key="1" v-show="bol3"></div>
    <div class="box33 b2" :key="2" v-show="bol3"></div>
    <div class="box33 b3" key="a3" v-show="bol3"></div>
    <div class="box33 b4" key="a4" v-show="bol3"></div>
    <div class="box33 b5" key="a5" v-show="bol3"></div>
  </transition-group>
</template>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: #f00;
  transition: all 0.5s;
}
.box-active {
  width: 500px;
  height: 500px;
}
.box2 {
  width: 50px;
  height: 50px;
  background-color: #00f;
}
.fade-enter-from {
  width: 0;
  height: 0;
  opacity: 0;
}
.fade-enter-active {
  transition: all 2s;
}
.fade-leave-to {
  transform: translateX(200px);
  opacity: 0;
}
.fade-leave-active {
  transition: all 2s;
}
.box33 {
  width: 50px;
  height: 50px;
  background-color: #0f0;
  display: inline-block;
  margin: 10px;
}

.xxx-enter-from {
  transform: translateY(100px);
  opacity: 0;
}
.xxx-enter-active {
  transition: all 0.5s;
  /* transition:属性 时长 延时 曲线 */
}
.b1 {
  transition-delay: 0.2s;
}
.b2 {
  transition-delay: 0.4s;
}
.b3 {
  transition-delay: 0.6s;
}
.b4 {
  transition-delay: 0.8s;
}
.b5 {
  transition-delay: 1s;
}
</style>
